<template>
  <div class="user-content">
    <div class="user-header">
    </div>
    <div class="user-middle-btn">
      <el-button type="success" @click="increase = true" plain>
        <el-icon>
          <Plus />
        </el-icon>新增<el-dialog v-model="increase" title="增加" width="800" v-if="data.selection.length == 0">
          <Bulletin @confirm="confirmList"></Bulletin>
        </el-dialog>
      </el-button>
      <el-button type="danger" @click="deleteList = true" plain>
        <el-icon>
          <Delete />
        </el-icon>删除<el-dialog v-model="deleteList" title="删除信息" width="500" v-if="!!data.selection.length">
          <DeleteUser @closeDelete="closeDelete" @confirmDelete="confirmDelete(e)" :deleteData="data.selection">
          </DeleteUser>
        </el-dialog>
      </el-button>
    </div>
    <div class="table-content">
      <el-table :data="data.pageData" :border="true" height="500"
        style="max-height: 500px;height: 100%; width:100%;overflow: auto;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" />
        <el-table-column v-for="item in data.tableName" :key="item.Comment" :prop="item.Field" :label="item.Comment">
        </el-table-column>
      </el-table>
    </div>
    <div class="paging">
      <div class="demo-pagination-block">
        <el-pagination :default-page-size="10" :page-sizes="[10, 20]" layout="total, sizes, prev, pager, next, jumper"
          :total="data.tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, watchEffect } from 'vue';
import { GetBulletin,GetBulletinAnnotations } from '../../api/event.js'
import Bulletin from '../../components/bulletin/addBulletin.vue';
import DeleteUser from '../../components/DeleteUser.vue';

const data = reactive({
  tableData: [],
  tableName: '',
  pageSize: 10,
  currentPage: 1,
  pageData: [],
  selection: [],
  category: [],
  searchCategory: [],

});


// 点击修改

const increase = ref(false)
const deleteList = ref(false)


// 获取商品表单的数据，表头名字
onMounted(() => {
  GetBulletin().then(res => {
    console.log(res);
    data.tableData = res.data
    console.log(data.tableData);
  });

  GetBulletinAnnotations().then(res => {
    console.log(res);
    data.tableName = res.data
  });
  // 分页
  watchEffect(() => {
    const startIndex = (data.currentPage - 1) * data.pageSize;
    const endIndex = data.currentPage * data.pageSize;
    data.pageData = data.tableData.slice(startIndex, endIndex);
  });
});

function handleSizeChange(val) {
  // console.log(val);
  // 下拉选择器改变每页显示条目的数量时,处理页大小变化后的逻辑，比如重新计算当前页的数据等。
  data.pageSize = val;
  data.currentPage = 1;
}

function handleCurrentChange(val) {
  // console.log(val);
  //分页组件中切换当前页码时, 方法通常用来处理切换页码后的逻辑，比如根据新的页码加载对应数据等。
  data.currentPage = val;
}

// 勾选选项框
const handleSelectionChange = (selection, row) => {
  if (selection !== '') {
    data.selection = selection;
    console.log('Selected Rows:', selection); // Log the selected rows
  } else {
    // Handle other logic if needed
  }
  // console.log('Selected Row:', row); // Log the selected row
};


// 点击确定,关闭弹窗,
const confirmList = () => {
  GetBulletin().then(res => {
    data.tableData = res.data
  })
  return increase.value = false
}


// 删除按钮的确认与取消
const confirmDelete = () => {
  GetBulletin().then(res => {
    data.tableData = res.data
  })
  return deleteList.value = false
}
const closeDelete = () => {
  return deleteList.value = false
}


</script>

<style lang="less" scoped>
.user-content {
  padding: 10px;
  border: 1px solid #e0dbdb;
  border-radius: 5px;
  /* 圆角 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  /* 好看的阴影效果 */
  margin: 10px;
}

.user-header {
  height: 50px;
  // border: 1px solid red;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .search,
  .search-user {
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header-btn {
    display: flex;

    .search-btn {
      margin-right: 20px;
    }
  }
}

.user-middle-btn {
  margin: -40px 0px 10px 10px;
}
</style>